<ng-container *ngIf="sectionList$ | async as $sectionList; else $wait">
  <ng-container *ngFor="let section of $sectionList; index as $index" [ngSwitch]="section.type">
    <ng-container *ngIf="loadedCount >= $index">
      <index-carousel
        *ngSwitchCase="SectionType.Carousel"
        [section]="section"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.rowSpan"
        (loaded)="loaded()"
      ></index-carousel>

      <index-cover
        *ngSwitchCase="SectionType.Cover"
        [section]="section"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.rowSpan"
        (loaded)="loaded()"
      ></index-cover>

      <index-ranking
        *ngSwitchCase="SectionType.Ranking"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.ranking.count"
        [section]="section"
        (loaded)="loaded()"
      ></index-ranking>

      <index-phrase
        *ngSwitchCase="SectionType.Phrase"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.rowSpan"
        [section]="section"
        (loaded)="loaded()"
      ></index-phrase>

      <index-assemble
        *ngSwitchCase="SectionType.Assemble"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.rowSpan"
        [section]="section"
        (loaded)="loaded()"
      ></index-assemble>

      <index-topic
        *ngSwitchCase="SectionType.Topic"
        [style.gridColumnEnd]="'span ' + section.colSpan"
        [style.gridRowEnd]="'span ' + section.rowSpan"
        [section]="section"
        (loaded)="loaded()"
      ></index-topic>
    </ng-container>
  </ng-container>
</ng-container>

<ng-template #$wait>
  <div class="wait">
    <app-wait></app-wait>
  </div>
</ng-template>
